<template>
  <el-dialog
    v-model="loginModalShow"
    :title="showType === 'login' ? '登录' : '注册'"
    @close="hideLogin"
    width="400"
  >
    <login-content
      v-if="showType === 'login'"
      @change="() => onChangeType('register')"
      @success="onLoginSuccess"
    />
    <register-content v-if="showType === 'register'" @change="() => onChangeType('login')" />
  </el-dialog>
</template>

<script lang="ts" setup>
import LoginContent from './login.vue'
import RegisterContent from './register.vue'
import { ref, computed } from 'vue'
import { getToken, setToken } from '@/utils/auth'
import { useStore } from 'vuex'

const showType = ref('login')

let { getters, commit } = useStore()

const loginModalShow = computed(() => {
  return getters.loginModalShow
})

const hideLogin = () => {
  commit('hideLogin')
}

const onChangeType = (type: string) => {
  console.log('type: ', type)
  showType.value = type
}

const onLoginSuccess = (token: string) => {
  hideLogin()
  setToken(token)
  commit('login')
}
</script>
<style lang="less" scoped>
.register-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  width: 300px;
  .el-form-item {
    margin-bottom: 20px;
    width: 100%;
    .el-input {
      height: 40px;
    }
  }
  .el-button {
    width: 100%;
  }
}
.tips {
  text-align: center;
  margin-top: 20px;
  cursor: pointer;
  color: #409eff;
}
</style>
